<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
	div {width: 100px; height: 100px; background:  red;margin: 10px; float: left;}	
</style>
<script>
	window.onload = function()
	{
			var oDiv1 = document.getElementById('div1');
			var oDiv2 = document.getElementById('div2');
			
			
					//oDiv1.timer = null;
					
					oDiv1.onmouseover= function()
					{
							//alert(this.id); 			//函数 没问题
							//alert(i)；									//变量在块级作用域会有问题，都是3。 需要用function()(i) 或者let解决
							startMove(this,400);
					};
					
					oDiv1.onmouseout = function()
					{
							startMove(this,100);
					};
		
					//oDiv2.timer = null;
					
					oDiv2.onmouseover= function()
					{
							//alert(this.id); 			//函数 没问题
							//alert(i)；									//变量在块级作用域会有问题，都是3。 需要用function()(i) 或者let解决
							startMove2(this,400);
					};
					
					oDiv2.onmouseout = function()
					{
							startMove2(this,100);
					};
				
	};
	
	//var timer = null;
	
	function startMove2(obj,iTarget)
	{
		
				clearInterval(obj.timer);
		
		 	obj.timer = setInterval(function(){
				var speed = (iTarget-obj.offsetWidth)/6;
					
				speed= speed>0?Math.ceil(speed):Math.floor(speed);

				if(iTarget==obj.offsetWidth)
					{

						clearInterval(obj.timer);
					}else{
						obj.style.width = obj.offsetWidth + speed + 'px';
					}
					
			},30);
		
	}
	
	function startMove(obj,iTarget)
	{
		
				clearInterval(obj.timer);
		
		 	obj.timer = setInterval(function(){
				var speed = (iTarget-obj.offsetHeight)/6;
					
				speed= speed>0?Math.ceil(speed):Math.floor(speed);

				if(iTarget==obj.offsetHeight)
					{

						clearInterval(obj.timer);
					}else{
						obj.style.height = obj.offsetHeight + speed + 'px';
					}
					
			},30);
		
	}
</script>
</head>

<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
</body>
</html>
